<!--
    -  Copyright (c) 2018-2025, haohanwork.com All rights reserved.
  -->
<template>
    <div class="execution">
      <!--添加tab切换栏-->
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick" class="tabContent">
          <el-tab-pane label="订单详情" name="orderDetail">
            <!--切换订单详情显示的内容-->
            <basic-container>
              <h2 class="io-goods-detail">
                基础信息
              </h2>
              <template>
                <el-row class="io-goods-detail basic-information">
                  <el-col :span="6"><div class="grid-content bg-purple">订单号:{{tableData[0].buyId}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple-light">客户名称:{{this.$route.query.buyerName}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple"></div>下单日期:{{tableData[0].buyTime}}</el-col>
                </el-row>
                <el-row class="io-goods-detail basic-information">
                  <el-col :span="6"><div class="grid-content bg-purple-light"></div>审核状态:{{tableData[0].status}}</el-col>
                  <el-col :span="6"><div class="grid-content bg-purple">配送方式:{{this.$route.query.deliveryType}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple-light">配送日期:{{this.$route.query.deliveryTime}}</div></el-col>
                </el-row>
                <el-row class="io-goods-detail basic-information">
                  <el-col :span="6"><div class="grid-content bg-purple"></div>付款状态:todo</el-col>
                  <el-col :span="6"><div class="grid-content bg-purple"></div>订单金额:{{this.$route.query.totalPrice}}</el-col>
                  <el-col :span="6"><div class="grid-content bg-purple"></div>制单人:{{this.$route.query.createBy}}</el-col>
                </el-row>
              </template>
            </basic-container>
            <basic-container>
              <h2 class="io-goods-detail">
                待入库商品清单
              </h2>
              <template>
                <el-table
                  :data="tableData"
                  style="width: 100%"
                  :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                  <el-table-column label="序号" prop="id" align="center" type="index"></el-table-column>
                  <el-table-column label="商品图片" align="center">
                    <template slot-scope="scope">
                      <img :src="scope.row.goodsImg" height="50px"/>
                    </template>
                  </el-table-column>
                  <el-table-column label="商品名称" prop="goodsName" align="center"></el-table-column>
                  <el-table-column label="单位" prop="unit" align="center"></el-table-column>
                  <el-table-column label="订单数量" prop="goodsNum" align="center"></el-table-column>
                  <el-table-column label="发货单价" prop="buyPrice" align="center"></el-table-column>
                  <el-table-column label="发货金额"  align="center">
                      <template slot-scope="scope">
                          <span v-text="scope.row.goodsNum*scope.row.buyPrice"></span>
                      </template>
                  </el-table-column>
                  <!--<el-table-column label="备注" prop="desc" align="center"></el-table-column>-->
                </el-table>
                <div>
                  <h3 class="settle-accounts">其它费用:{{this.$route.query.shipFee}}</h3>
                  <h3 class="settle-accounts">合计金额:{{parseInt(this.$route.query.totalPrice)+parseInt(this.$route.query.shipFee)}}</h3>
                </div>
              </template>
            </basic-container>
            <basic-container>
              <h2 class="io-goods-detail">
                单据操作历史
              </h2>
              <template>
                <el-table
                  :data="operationalHistory"
                  style="width: 100%"
                  :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                  <el-table-column label="序号" prop="id" align="center" type="index"></el-table-column>
                  <el-table-column label="操作时间" prop="operatingTime" align="center"></el-table-column>
                  <el-table-column label="操作人" prop="operator" align="center"></el-table-column>
                  <el-table-column label="类型" prop="type" align="center"></el-table-column>
                  <el-table-column label="日志" prop="log" align="center"></el-table-column>
                </el-table>
              </template>
              <template>
                <div class="return-btn">
                  <el-button type="primary" plain @click="backup">返回</el-button>
                </div>
              </template>
            </basic-container>

          </el-tab-pane>
          <el-tab-pane label="出库记录" name="deliveryRecord">
            <!--切换出库记录显示的内容-->

            <basic-container>
              <h2 class="io-goods-detail">
                基础信息
              </h2>
              <template>
                <el-row class="io-goods-detail basic-information">
                  <el-col :span="6"><div class="grid-content bg-purple">订单号:{{basicInformation.purchaseOrderId}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple-light"></div>审核状态:{{basicInformation.supplierName}}</el-col>
                  <el-col :span="6"><div class="grid-content bg-purple"></div>出库类型:{{basicInformation.purchaseType}}</el-col>
                </el-row>
                <el-row class="io-goods-detail basic-information">
                  <el-col :span="6"><div class="grid-content bg-purple">客户名称:{{basicInformation.deliveryTime}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple-light">出库状态:{{basicInformation.purchaseEmployee}}</div></el-col>
                </el-row>
              </template>
            </basic-container>
            <basic-container>
              <h2 class="io-goods-detail">
                待入库商品清单
              </h2>
              <template>
                <el-table
                  :data="tableData"
                  style="width: 100%"
                  :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                  <el-table-column label="序号" prop="id" align="center" type="index"></el-table-column>
                  <el-table-column label="商品图片" align="center">
                    <template slot-scope="scope">
                      <img :src="scope.row.goodsImg" height="50px"/>
                    </template>
                  </el-table-column>
                  <el-table-column label="商品" prop="goods" align="center"></el-table-column>
                  <el-table-column label="单位" prop="unit" align="center"></el-table-column>
                  <el-table-column label="订单数量" prop="orderNum" align="center"></el-table-column>
                  <el-table-column label="出库数量" prop="deliveryPrice" align="center"></el-table-column>
                  <!--<el-table-column label="备注" prop="desc" align="center"></el-table-column>-->
                </el-table>
                <div>
                  <h3 class="settle-accounts">其它费用:{{otherMoney}}</h3>
                  <h3 class="settle-accounts">合计金额:{{calcMoney}}</h3>
                </div>
              </template>
            </basic-container>
            <basic-container>
              <h2 class="io-goods-detail">
                单据操作历史
              </h2>
              <template>
                <el-table
                  :data="operationalHistory"
                  style="width: 100%"
                  :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                  <el-table-column label="序号" prop="id" align="center" type="index"></el-table-column>
                  <el-table-column label="操作时间" prop="operatingTime" align="center"></el-table-column>
                  <el-table-column label="操作人" prop="operator" align="center"></el-table-column>
                  <el-table-column label="类型" prop="type" align="center"></el-table-column>
                  <el-table-column label="日志" prop="log" align="center"></el-table-column>
                </el-table>
              </template>
              <template>
                <div class="return-btn">
                  <el-button type="primary" plain @click="backup">返回</el-button>
                </div>
              </template>
            </basic-container>
          </el-tab-pane>
        </el-tabs>
      </template>
    </div>
</template>
<!-- 采购退货 -->
<script>
    import {
        mapGetters
    } from 'vuex'
    import {
        getOrderDetail,
    } from "../../../../api/scm/order/order_manage";
    import Index from "../../../../pds/report/goods/index";
    export default {
        name: 'addpurchaseback',
        components: {Index},
        data() {
            return {
                activeName: 'orderDetail',
                tableData: [],
                otherMoney:100,
                calcMoney:1000,
                basicInformation:{
                    purchaseOrderId:'POI10000',
                    checkStatus:'待审核',
                    purchaseType:'平台直购',
                    supplierName:'浩瀚小店',
                    deliveryTime:'2019-03-09',
                    purchaseEmployee:'张**',
                    makeBill:'运营'
                },
                operationalHistory:[
                    {
                        operatingTime:'2019-02-01 12:00',
                        operator:'张**',
                        type:'新增采购单',
                        log:'已新增采购单'
                    },
                    {
                        operatingTime:'2019-02-01 12:00',
                        operator:'张**',
                        type:'新增采购单',
                        log:'已新增采购单'
                    },
                    {
                        operatingTime:'2019-02-01 12:00',
                        operator:'张**',
                        type:'新增采购单',
                        log:'已新增采购单'
                    }
                ]
            }
        },
        created(){
          this.init();
        },
        computed: {
            ...mapGetters(['permissions'])
        },
        methods:{
            backup:function () {
                this.$router.go(-1);
            },
            handleClick(tab, event) {
              console.log(tab, event);
            },
            init(){
                let pmId=this.$route.query.pmId
                let buyId=this.$route.query.buyId
                getOrderDetail(pmId,buyId).then(res =>{
                    this.tableData=res.data.data
                })

                let query= {
                  pmId: this.$route.query.pmId,
                  goodsModelId: this.$route.query.goodsModelId,
                  buySeq: this.$route.query.buySeq,
                  deliveryTime: this.$route.query.deliveryTime,
                }
                if(this.$route.query.summaryOrderId=="" || this.$route.query.summaryOrderId == undefined || this.$route.query.summaryOrderId == null){
                  query.summaryFlag = '0'
                }else {
                  query.summaryFlag = '1'
                }
                console.log("query",query)
                queryWaitSummaryOrderDetail(query).then(res =>{
                    this.tableData = res.data.data;
                })

            }
        }
    }
</script>

<style lang="scss">
    .io-goods-detail{
        margin-left: 10px;
    }
    .settle-accounts{
        text-align: right;
    }
    .basic-information {
        margin-top: 20px;
        font-weight: inherit;
    }
    .return-btn{
        height: 100px;
        width: 100%;
        text-align: center;
        line-height: 100px;
    }
  .tabContent {
    padding-left: 10px;
    .el-tabs__item {
      font-size: 20px;
    }
    }

</style>
